<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/9/18
  Time: 12:16
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<script src="${path}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${path}/static/css/style.css">
<script>
    function updateNicknameHref() {
        var selectElement = document.getElementById('nickName');
        var selectedOption = selectElement.options[selectElement.selectedIndex];
        var id = selectedOption.value;
        var runnerId = selectElement.dataset.runnerId;
        if (id === '') {
            id = 0;
        }
        document.getElementById('nick').href = '${path}/manage/giveNickName?id='+id+'&runner='+runnerId;
    }
</script>
<html>
<body>
<div class="container">
    <header>
        <h1>跑腿员管理</h1>
        <jsp:include page="inc/inc.jsp"></jsp:include>
    </header>
        <main>
            <form id="searchForm">
                <label for="searchName">姓名：</label>
                <input type="text" id="searchName" placeholder="输入姓名">
                <label for="searchPhone">手机号：</label>
                <input type="text" id="searchPhone" placeholder="输入手机号">
                <input type="button" value="搜索" onclick="searchRunners()">
                <input type="button" value="刷新" onclick="{
                        window.location.href='${path}/manage/runnerList';}">
            </form>

            <c:if test="${empty requestScope.runnerList}">
            <p>没有跑腿员信息。</p>
            </c:if>
        <c:if test="${empty requestScope.runnerList}">
            <p>没有跑腿员信息。</p>
        </c:if>
        <c:if test="${not empty requestScope.runnerList}">
            <table>
                <tr>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>完成任务数量</th>
                    <th>备注</th>
                    <th>称号</th>
                    <th>评分</th>
                    <th>状态</th>
                    <th colspan="2">操作</th>
                </tr>
                <c:forEach items="${requestScope.runnerList}" var="runner">
                    <tr>
                        <td>${runner.runnerName}</td>
                        <td>${runner.phone_number}</td>
                        <td>${runner.completedOrderNumber}</td>
                        <td>${runner.text}</td>
                        <td>${runner.nickname.nickname}</td>
                        <td>${runner.rating}</td>
                        <td>${runner.enable?"正常":"冻结"}</td>
                        <td>
                            <c:if test="${!runner.enable}">
                                <a href="${path}/manage/banRunner?id=${runner.id}&status=true">解除冻结</a>
                            </c:if>
                            <c:if test="${runner.enable}">
                                <a href="${path}/manage/banRunner?id=${runner.id}&status=false">冻结</a>
                            </c:if>
                        </td>
                        <td>
                            <select id="nickName" data-runner-id="${runner.id}" onchange="updateNicknameHref()">
                                <c:forEach items="${requestScope.nicknameList}" var="nic">
                                    <option value="${nic.id}">${nic.nickname}</option>
                                </c:forEach>
                            </select>
                            <a href="#" id="nick" onclick="updateNicknameHref()">授予称号</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </c:if>
    </main>

</div>
</body>
<script>
    function searchRunners() {
        var searchName = $('#searchName').val();
        var searchPhone = $('#searchPhone').val();
        if (!searchName &&!searchPhone) {
            alert('姓名和手机号不能都为空，请重新输入。');
            return;
        }
        $.ajax({
            url: '${path}/manage/searchRunners',
            type: 'GET',
            dataType: 'json',
            data: {
                name: searchName,
                phone: searchPhone
            },success: function (response) {
                // 清空原有的表格内容
                $('table tr:gt(0)').remove();
                    $.each(response.runnerList, function (index, runner) {
                        var row = '<tr>' +
                            '<td>' + runner.runnerName + '</td>' +
                            '<td>' + runner.phone_number + '</td>' +
                            '<td>' + runner.completedOrderNumber + '</td>' +
                            '<td>' + runner.text + '</td>' +
                            '<td>' + runner.nickname.nickname + '</td>' +
                            '<td>' + runner.rating + '</td>' +
                            '<td>' + (runner.enable?"正常":"冻结") + '</td>' +
                            '<td>';
                        if (!runner.enable) {
                            row += '<a href="${path}/manage/banRunner?id=' + runner.id + '&status=true">解除冻结</a>';
                        } else {
                            row += '<a href="${path}/manage/banRunner?id=' + runner.id + '&status=false">冻结</a>';
                        }
                        row += '</td><td><select id="nickName" data-runner-id="' + runner.id + '" onchange="updateNicknameHref()">';
                        $.each(response.nicknameList, function (i, nic) {
                            row += '<option value="' + nic.id + '">' + nic.nickname + '</option>';
                        });
                        row += '</select><a href="#" id="nick" onclick="updateNicknameHref()">授予称号</a></td></tr>';
                        $('table').append(row);
                    });


            },
        });
    }
</script>
</html>